<template>
  <common-search :col-layout="{xxl: 6, xl:8, lg: 8, md: 12, sm: 24, xs: 24}" v-model="query" :formItems="formItems" @search="onSearch" @reset="onReset"></common-search>
  <a-row justify="space-between">
    <a-col :span="24">
      <div class="line-chart" ref="truckRankRef"></div>
    </a-col>
  </a-row>
  <a-button type="primary" @click="exports" :loading="exportLoading">导出明细</a-button>
  <common-table
      :columns="columns"
      :dataSource="dataList"
      v-model:loading="loading"
      :scroll="{ x: 'max-content',y: 300}"
  >
  </common-table>
</template>
<script>
export default {
  name:"tail-tailDelivery"
}
</script>
<script setup>
import CommonSearch from "@/components/commonSearch/index.vue";
import CommonTable from "@/components/commonTable/index.vue";
import {useSearchTable} from "@/hooks/table/useSearchTable";
import { ref,watch } from "vue";
import {message} from "ant-design-vue";
import {useEcharts} from "@/hooks/echarts/useEcharts.js";
import {diffDate, getBeforeMonthDate, pathDate} from "@utils/utils.js";
import {getTailDeliveryReport} from "@/api/tail/tailDelivery.js";
import {getManyDictItems} from "@/api/system/dict.js";
import {postFile} from "@utils/service/index.js";
const truckRankRef = ref()
const columns = [
  {
    title: "日期",
    dataIndex: "dateWarehouseShipping",
    key: "dateWarehouseShipping",
    align: 'center',
  },
  {
    title: "站点",
    dataIndex: "site",
    key: "site",
    align: 'center'
  },
  {
    title: '标发票数',
    dataIndex: 'saleOrderCodeShippingQty',
    key: 'saleOrderCodeShippingQty',
    align: 'center'
  },
  {
    title: '标发箱数',
    dataIndex: 'shippingQty',
    key: 'shippingQty',
    align: 'center'
  },
  {
    title: '快递票数',
    dataIndex: 'saleOrderCodeExpressQty',
    key: 'saleOrderCodeExpressQty',
    align: 'center'
  },
  {
    title: '快递箱数',
    dataIndex: 'expressShippingQty',
    key: 'expressShippingQty',
    align: 'center'
  },
  {
    title: '卡派票数',
    dataIndex: 'saleOrderCodeTruckQty',
    key: 'saleOrderCodeTruckQty',
    align: 'center'
  },
  {
    title: '卡派箱数',
    dataIndex: 'truckShippingQty',
    key: 'truckShippingQty',
    align: 'center'
  },
  {
    title: '其他票数',
    dataIndex: 'saleOrderCodeOtherQty',
    key: 'saleOrderCodeOtherQty',
    align: 'center'
  },
  {
    title: '其他箱数',
    dataIndex: 'otherShippingQty',
    key: 'otherShippingQty',
    align: 'center'
  },
];
const exportLoading = ref(false)
const formItems = ref([
  {
    label:'站点',
    field: 'site',
    type:'select',
    options:[]
  },
  {
    label:'发货日期',
    field: 'time',
    type:'rangePicker',
    showTime: false,
  },
]);
let instance
const data = ref([])
const yearWeekList = ref([]);
const name = ref('')
const { dataList, query, loading, search, reset } = useSearchTable({
  searchAPI: getTailDeliveryReport,
  queryFactory: () => {
    return {
      time: getBeforeMonthDate(1),
      site: 'US',
    }
  },
  beforeSearch: () => {
    if(query.value.time){
      query.value.beginDate = query.value.time[0]
      query.value.endDate = query.value.time[1]
    }else{
      delete query.value.beginDate
      delete query.value.endDate
    }
  },
  afterSearch:async () => {
    name.value = '尾程发货'
    let lists = [...dataList.value]
    lists = pathDate(lists.reverse(),'day','YYYY-MM-DD','dateWarehouseShipping','0','saleOrderCodeTruckQty','saleOrderCodeExpressQty','saleOrderCodeOtherQty')
    yearWeekList.value = lists.map(item => item.dateWarehouseShipping)
    data.value[0] = lists.map(item => item.saleOrderCodeTruckQty)
    data.value[1] = lists.map(item => item.saleOrderCodeExpressQty)
    data.value[2] = lists.map(item => item.saleOrderCodeOtherQty)
    const {initChart} = useEcharts(instance,truckRankRef,change())
    console.log(change())
    outerInitChart = initChart
  }
});
let outerInitChart = () => {}
const change = () => {
  let option = {
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis',

    },
    legend: {
      data: [ '卡派票数', '快递票数','其他票数']
    },
    xAxis:
      {
        boundaryGap: false,
        type: 'category',
        data: [],
      },
    yAxis: {
        type: 'value',
        name: '数目(件)',
        min: 0,
        interval: 30,
      },
    series: [
      {
        name: '卡派票数',
        type: 'line',
        data: []
      },
      {
        name: '快递票数',
        type: 'line',
        data: []
      },
      {
        name: '其他票数',
        type: 'line',
        data: [],
      },
    ]
  };
  option.xAxis.data = yearWeekList.value
  option.title.text = name.value
  option.series[0].data = data.value[0]
  option.series[1].data = data.value[1]
  option.series[2].data = data.value[2]
  return option;
}
const onSearch = async () => {
  if(!query.value.time){
    return message.error('请选择日期')
  }
  if(!query.value.site){
    return message.error('请选择站点')
  }
  if(!diffDate(query.value.time[0],query.value.time[1],7)){
    return message.error('请选择七个月内的日期')
  }
  search()
}
const exports = async () => {
  try{
    if(!query.value.time){
      return message.error('请选择日期')
    }
    if(!query.value.site){
      return message.error('请选择站点')
    }
    if(!diffDate(query.value.time[0],query.value.time[1],7)){
      return message.error('请选择七个月内的日期')
    }
    exportLoading.value = true
    const res = await postFile('/wms/report_form/tail_shipping_report_detail','post',query.value,`尾程标发${query.value.time[0]}-${query.value.time[1]}.xlsx`)
  }catch (e){
    message.error(e)
  }finally {
    exportLoading.value = false
  }
}
const onReset = async () => {
  query.value.site = ''
  await reset()
}
const init = async () => {
  try{
    const res = await getManyDictItems({
      dictCodeList:"site"
    })
    formItems.value[0].options = res.result.site
  }catch (e){
    console.log(e)
  }
}
onMounted(() => {
  init()
})
watch(() => dataList.value,() => {
  outerInitChart()
})
</script>
<style scoped>
.line-chart {
  width:100%;
  height:500px;
}
</style>
